<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :fullscreen.sync="fullscreen"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-card :bordered="false" style="margin-top: -15px">
      <detail-list title="基本信息">
        <detail-list-item term="状态">
          <a-tag color="blue" v-if="model.bizStatus === 1">已签收</a-tag>
          <a-tag color="orange" v-if="model.bizStatus === 0">待签收</a-tag>
          <a-tag color="red" v-if="model.bizStatus === -1">作废</a-tag>
        </detail-list-item>
        <detail-list-item term="单号">{{ model.billNo }}</detail-list-item>
        <detail-list-item term="发货机构">{{ model.senderStockOrgNm }}</detail-list-item>
        <detail-list-item term="收货门店">{{ model.receiverStockOrgNm }}</detail-list-item>
        <detail-list-item term="发货日期">{{ model.sendDate }}</detail-list-item>
        <detail-list-item term="签收日期">{{ model.billDate ? model.billDate : '-' }}</detail-list-item>
        <detail-list-item term="经办人">{{ model.clerkUser ? model.clerkUser : '-' }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="入库商品">
        <detail-list-item term="总件数">{{ model.totalQty }}</detail-list-item>
        <detail-list-item term="总金额">{{ model.totalAmount }}</detail-list-item>
      </detail-list>
      <!-- 增加价位表格 -->
      <div class="table-operations">
        <a-row>
          <a-col :md="20" :xs="24">
            
          </a-col>
          <a-col :md="4" :xs="24" class="r-group">
            <a-radio-group v-model="groupCol">
              <a-radio-button value="default">默认</a-radio-button>
              <a-radio-button value="price">价位</a-radio-button>
            </a-radio-group>
          </a-col>
        </a-row>
      </div>
      <s-table
        size="middle"
        v-if="groupCol === 'default'"
        :columns="goodsColumns"
        :data="loadGoodsData"
        :pagination="false"
      >
        <span slot="photo" slot-scope="text">
          <a-avatar
            shape="square"
            :src="text + '?x-oss-process=image/resize,w_50,h_50'"
            @click="text ? previewImgObject([text]) : () => {}"
          >
          </a-avatar>
        </span>
      </s-table>
      <a-table
        size="middle"
        v-else
        :columns="groupColumns"
        :dataSource="groupDataList"
        :pagination="false"
      >
        <a-table
          style="margin: 1px"
          slot="expandedRowRender"
          slot-scope="record"
          :columns="goodsColumns"
          :dataSource="record.list"
          size="small"
          rowKey="id"
          bordered
          :pagination="false"
          :scroll="{ y: 1000 }"
        >
          <span slot="photo" slot-scope="text">
            <a-avatar
              shape="square"
              :src="text + '?x-oss-process=image/resize,w_50,h_50'"
              @click="text ? previewImgObject([text]) : () => {}"
            >
            </a-avatar>
          </span>
        </a-table>
      </a-table>
    </a-card>
  </j-modal>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
import { postAction } from '@/api/manage'
import { groupingData } from '@/utils/util'
const DetailListItem = DetailList.Item

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,
  },
  name: 'PosStockIoBillModal',
  data() {
    return {
      title: '操作',
      fullscreen: true,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      groupingData,
      groupCol:'default',
      groupDataList: [],
      groupColumns: [
        {
          title: '价位',
          align: 'left',
          dataIndex: 'orgprice',
        },
        {
          title: '件数',
          align: 'left',
          dataIndex: 'cnt',
          customRender: (text, record) => {
            return record.list.reduce((total, cur) => {
              return total + cur.quantity
            }, 0)
          },
        },
      ],
      goodsColumns: [
        {
          title: '商品编号',
          dataIndex: 'item_cd',
          key: 'item_cd',
        },
        {
          title: '商品名称',
          dataIndex: 'item_nm',
          key: 'item_nm',
        },
        {
          title: 'SKU编码',
          dataIndex: 'item_sku',
          key: 'item_sku',
        },
        {
          title: '颜色',
          dataIndex: 'item_color_nm',
          key: 'item_color_nm',
        },
        {
          title: '尺码',
          dataIndex: 'item_size_nm',
          key: 'item_size_nm',
        },
        {
          title: '单价',
          dataIndex: 'orgprice',
          key: 'orgprice',
          align: 'right',
        },
        {
          title: '数量（件）',
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'right',
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'brandName'
        },
      ],
      loadGoodsData: () => {
        let params = { billId: this.model.billId }
        let that = this
        return postAction(this.url.detail, params).then((res) => {
          if (res.success) {
            let goodsItemList = res.result.posStockBilllGoodsOutVOList.sort((a, b) => Number(a.orgprice) - Number(b.orgprice))

            that.groupDataList = that.groupingData(goodsItemList, 'orgprice')

            return { data: goodsItemList }
          }
          return { data: [] }
        })
      },
      url: {
        detail: '/stock/posStockIoBill/getBill',
      },
    }
  },
  created() {},
  methods: {
    view(record) {
      this.model = Object.assign({}, record)
      console.log('record:', record)
      this.visible = true
    },
    clear(){
      this.groupCol = 'default'
      this.groupDataList = []
    },
    close() {
      this.clear()
      this.$emit('close')
      this.visible = false
      // this.$refs.form.clearValidate()
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.table-operations {
  margin-bottom: 3px;

  .r-group {
    z-index: 999;
    text-align: right;
  }
}
</style>